<template>
  <el-dialog width="600px" :close-on-click-modal="false" :title="title" :visible.sync="visible" append-to-body>
    <el-form class="four" label-width="200px" ref="form" :model="formData" :rules="form_rules">
      <el-form-item label="供应商全称" prop="supplierFullName">
        <el-input class="inline-input w250" v-model="formData.supplierFullName" placeholder="输入全称"></el-input>
      </el-form-item>
      <el-form-item label="供应商简称" prop="supplierShortName">
        <el-input class="inline-input w150" v-model="formData.supplierShortName" placeholder="输入简称"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input class="inline-input w250" v-model="formData.address" placeholder="输入公司地址"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="mail">
        <el-input class="inline-input w250" v-model="formData.mail" placeholder="输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="principal">
        <el-input class="inline-input w150" v-model="formData.principal" placeholder="输入联系人"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="telephone">
        <el-input class="inline-input w250" v-model="formData.telephone" placeholder="例： 010-123456 或13888888888"></el-input>
      </el-form-item>
      <el-form-item label="外协" prop="purchase">
        <el-switch v-model="formData.purchase"></el-switch>
      </el-form-item>
      <el-form-item label="外购" prop="outsource">
        <el-switch v-model="formData.outsource"></el-switch>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'
import { insertSupplierList, updateSupplierList } from '@/api/interface1'
import { Message } from 'element-ui'
@Component({
  components: {}
})
export default class DialogDetail extends Vue {

  formData:any = {
    supplierFullName: '',
    supplierShortName: '',
    address: '',
    telephone: '',
    mail: '',
    principal: '',
    outsource: true,
    purchase: false,
    state:'',
  }

  @Prop()
  fetchData

  public $refs!: {
    form: any
  }
  title: string = '供应商信息'
  visible: boolean = false

  checkPhone = (rule, value, callback) => {
    if (!value) {
      return callback()
    }
    if (/^0\d{2,3}-?\d{7,8}$/.test(value) || /^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
      callback()
    } else {
      callback(new Error('格式输入不正确'))
    }
  }
  form_rules = {
    supplierFullName: [{ required: true, message: '供应商全称不能为空！', trigger: 'blur' }],
    supplierShortName: [{ required: true, message: '供应商简称不能为空！', trigger: 'blur' }],
    mail: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
  }

  open(row) {
    console.log("弹框打开");
    console.log(row);
    
    this.formData = row
    this.visible = true
  }

  save() {
    this.$refs['form'].validate(valid => {
      if (valid) {
        if (this.formData.id) {
          updateSupplierList(this.formData)
            .then(res => {
              if (res.success) {
                Message.success('操作成功')
                this.close()
                this.$emit('fetchData')
              }
            })
            .catch((err: any) => {
              Message.error(err)
            })
        } else {
          insertSupplierList(this.formData)
            .then(res => {
              if (res.success) {
                Message.success('添加成功')
                this.$emit('fetchData')
                this.close()
              }
            })
            .catch((err: any) => {
              Message.error(err)
            })
        }
      }
    })
  }

  close() {
    this.visible = false
    this.$refs.form.resetFields()
  }
}
</script>

<style lang="scss" scoped>
.four {
  margin-top: 30px;
  .el-form-item {
    margin-bottom: 22px;
  }
}
</style>
